<template>
<div class="out-box">
	<el-form ref="form" :model="form" label-width="100px" size="small" class="form-box">
	  <el-form-item label="团队号码">
	    <el-input v-model="form.teamNo"></el-input>
	  </el-form-item>
	  <el-form-item label="地点">
	    <el-cascader
	    	:filterable="true"
	    	:change-on-select="true"
	    	expand-trigger="hover"
		    :options="cityLocation"
		    placeholder="请选择地点"
		    v-model="form.cityLocation">
		  </el-cascader>
	  </el-form-item>
	  <el-form-item label="活动时间">
	    <el-col :span="11">
	      <el-date-picker type="date" placeholder="选择日期" v-model="form.startDate" style="width: 100%;"></el-date-picker>
	    </el-col>
	    <el-col class="line tc" :span="2">-</el-col>
	    <el-col :span="11">
	      <el-date-picker type="date" placeholder="选择时间" v-model="form.endDate" style="width: 100%;"></el-date-picker>
	    </el-col>
	  </el-form-item>
	  <el-form-item label="发票">
	    <el-switch v-model="form.hasInvoice"></el-switch>
	    <el-input v-model="form.invoice" v-if="form.hasInvoice"></el-input>
	  </el-form-item>
	  <el-form-item label="客户公司">
	    <el-input v-model="form.client"></el-input>
	  </el-form-item>
	  <el-form-item label="客户负责人">
	    <el-input v-model="form.clientCharge"></el-input>
	  </el-form-item>
	  <el-form-item label="发票金额 ">
	     <el-input-number v-model="form.invoiceAmount" :precision="2" :step="0.1"></el-input-number>
	     <span>（含增值税）</span>
	  </el-form-item>
	  <el-form-item label="增值税">
	    <el-input-number v-model="form.VAT" :precision="2" :step="0.1"></el-input-number>
	  </el-form-item>

	  <el-form-item label="实际费用">
	    <el-input-number v-model="form.actualCost" :precision="2" :step="0.1"></el-input-number>
	    <span>（不含增值税，含服务费）</span>
	  </el-form-item>
	  <el-form-item label="成本">
	    <el-input-number v-model="form.cost" :precision="2" :step="0.1"></el-input-number>
	  </el-form-item>
	  <el-form-item label="利润额">
	    <el-input-number v-model="form.profit" :precision="2" :step="0.1"></el-input-number>
	  </el-form-item>
	    <el-form-item label="利润率">
	    <el-input v-model="form.rate"></el-input>
	  </el-form-item>
	    <el-form-item label="操作负责人">
	    <el-input v-model="form.charge"></el-input>
	  </el-form-item>
	    <el-form-item label="出团人员">
	    <el-input v-model="form.participant"></el-input>
	  </el-form-item>
	    <el-form-item label="po号" v-model="form.desc"></el-input>
	    <el-input v-model="form.PONo"></el-input>
	  </el-form-item>

	  <el-form-item label="报账日期">
	    <el-date-picker type="date" placeholder="选择日期" v-model="form.reportDate" style="width: 100%;"></el-date-picker>
	  </el-form-item>
	    <el-form-item label="开票日期">
	    <el-date-picker type="date" placeholder="选择日期" v-model="form.billingDate" style="width: 100%;"></el-date-picker>
	  </el-form-item>
	    <el-form-item label="到账日期">
	    <el-date-picker type="date" placeholder="选择日期" v-model="form.arrival" style="width: 100%;"></el-date-picker>
	  </el-form-item>
	  <el-form-item label="备注">
	    <el-input type="textarea" v-model="form.remark"></el-input>
	 </el-form-item>
	  <el-form-item>
	    <el-button type="primary" @click="onSubmit">保存数据</el-button>
	    <el-button @click="reset">取消</el-button>
	  </el-form-item>
	</el-form>
</div>
</template>

<script>
import { activityService } from "../../service/activityService.js"
import cityLocation from "../../../static/json/location.json"

export default {
    data() {
      return {
        form: {
          teamNo: '',
          cityLocation: [],
          location:'',
          startDate: '',
          endDate: '',
          hasInvoice: false,
          invoice:'',
          
          client: '',
          clientCharge: '',
          invoiceAmount: '',
          VAT: '',
          actualCost: '',
          cost: '',
          profit: '',
          charge: '',
          participant: '',
          PONo: '',
          contract: '',
          reportDate: '',
          billingDate: '',
          arrival: '',
          rate: '',
          remark: ''
        },
        cityLocation: cityLocation
      }
    },
    mounted:function(){
    	if(this.$route.params.id){
    		this.getActivityInfo()
    	}
	},
    methods: {
      onSubmit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
          	this.form.location = this.form.cityLocation.join("-")
          	if(this.$route.params.id){
          		activityService.editActivity(this.form,this.form.id).then(()=>{
            		this.$message.success("修改成功")
            	})
          	}else{
          		this.form.creater = this.getCookie("a-user")
          		activityService.createActivity(this.form).then(()=>{
            		this.$message.success("新建成功")
            	})
          	}
            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      reset(){
      	this.$refs.form.resetFields();
      },
      getActivityInfo(){
      	activityService.getActivityInfo(this.$route.params.id).then((res)=>{
      		this.form = res
      	})
      }
    }
  }
</script>

<style lang="css" scoped>
	.form-box{
		width: 600px;
	}
</style>